<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    request.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>餐品管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="${path}/css/css.css"/>
    <link rel="stylesheet" type="text/css" href="${path}/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="${path}/css/menu.css"/>
    <link rel="stylesheet" type="text/css" href="${path}/css/address.css"/>
    <script type="text/javascript"
            src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="${path}/layer/layer.js" type="text/javascript"></script>
    <script src="${path}/js/main.js" type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/distpicker/2.0.3/distpicker.js"></script>
    <script type="text/javascript">
        function uploadPhoto(id) {
            $("#photoFile" + id).click();
        }

        /**
         * 上传图片
         */
        function upload(id) {
            if ($("#photoFile" + id).val() == '') {
                return;
            }
            var formData = new FormData();
            formData.append('photo', $('#photoFile' + id)[0].files[0]);
            $.ajax({
                url: "ProductServlet/upload",
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data != "") {
                        layer.msg('上传图片成功');
                        $("#productPic" + id).val(data);
                    } else
                        layer.msg('上传图片失败');
                }
            });
        }

        //删除方法
        function del(id, nowPage) {
            let nowPages = nowPage;
            let productId = id;
            layer.confirm('确定要删除吗？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.get("ProductServlet/del", {
                    "productId": productId,
                    "nowPage": nowPages
                }, function (data) {
                    if (data == 1) {
                        location.reload();
                    } else if (data == 0) {
                        location.href = "${path}/ProductServlet/gotoProduct?nowPage=${nowPage-1}";
                    } else {
                        layer.msg('添加失败');
                    }
                }, "text");
            });
        }

        //上架
        function update(id, type) {
            let productId = id;
            let productStatus = type;
            var msg;
            if (type == 'N') {
                msg = "下架"
            } else {
                msg = "上架"
            }
            layer.confirm('确定要' + msg + '吗？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.get("ProductServlet/updateStatus", {
                    productStatus: productStatus,
                    productId: productId
                }, function (data) {
                    if (data == 1) {
                        location.reload();
                    } else {
                        layer.msg(msg + '失败');
                    }
                }, "text")

            });
        }

        //判断用户名是否存在
        function checkPName(t) {
            let name = $.trim(t.value);
            if (name != "") {
                //校验名字是否已经存在
                $.get("ProductServlet/chePName?name=" + name, function (data) {
                    if (data == 1) {
                        $(".msg").html("该菜品存在已经存在");
                        $(".addsub").attr("disabled", true);
                    } else {
                        $(".msg").html("");
                        $(".addsub").attr("disabled", false);
                    }
                }, "text");
            }
        }
        //修改方法判断用户名是否存在
        function checkName(t) {
            //获取旧姓名和新姓名
            let oldName = $("#oldName").val();
            let name = $.trim(t.value);
            if(oldName == name){
                $("#msg").html("");
                $("#sub").attr("disabled", false);
            }else {
                if (name != "") {
                    //校验名字是否已经存在
                    $.get("ProductServlet/chePName?name=" + name, function (data) {
                        if (data == 1) {
                            $(".msg").html("该菜品已经存在");
                            $(".addsub").attr("disabled", true);
                        } else {
                            $(".msg").html("");
                            $(".addsub").attr("disabled", false);
                        }
                    },"text");
                }
            }
        }

        //上传方法
        function save(id) {
            let productPic = $("#productPic" + id).val();
            let productName = $("#productName" + id).val();
            let productPrice = $("#productPrice" + id).val();
            let productDescribe = $("#productDescribe" + id).val();
            let categoryId = $("#categoryId" + id).val();
            if (productPic == "" || productName == "" || productPrice == ""
                || productDescribe == "") {
                layer.alert("请输入完整数据");
            } else {
                $.post("ProductServlet/addProduct?productId=" + id, {
                    "productPic": productPic,
                    "productName": productName,
                    "productPrice": productPrice,
                    "productDescribe": productDescribe,
                    "categoryId": categoryId
                }, function (data) {
                    if (data > 0)
                        location.href = "${path}/ProductServlet/gotoProduct?nowPage=" + data;
                    else
                        layer.msg('操作失败');
                });
            }
        }

        //修改方法
        function updateProduct(id) {
            let productPic = $("#productPic" + id).val();
            let productName = $("#productName" + id).val();
            let productPrice = $("#productPrice" + id).val();
            let productDescribe = $("#productDescribe" + id).val();
            let categoryId = $("#categoryId" + id).val();
            if (productPic == "" || productName == "" || productPrice == ""
                || productDescribe == "") {
                layer.alert("请输入完整数据");
            } else {
                $.post("ProductServlet/updateProduct?productId=" + id, {
                    "productPic": productPic,
                    "productName": productName,
                    "productPrice": productPrice,
                    "productDescribe": productDescribe,
                    "categoryId": categoryId
                }, function (data) {
                    if (data == 1)
                        location.reload();
                    else
                        layer.msg('修改失败');
                });
            }
        }
    </script>
</head>
<body>
<div class="m-main">
    <div class="m-food">
        <div class="mf-top border-t">
            <div class="fl">
                餐品管理
            </div>
            <div class="fr">
                <form action="ProductServlet/gotoProduct" method="post">
                    <select class="select" name="categoryName">
                        <option value="">全部分类</option>
                        <c:forEach items="${tList}" var="tList">
                            <option value="${tList.categoryName}"
                                    id="${tList.categoryId}">${tList.categoryName}</option>
                        </c:forEach>
                    </select>
                    <input type="text" name="productName" value="${requestScope.productName}" placeholder="餐品名称"/>
                    <button type="submit">
                        搜索
                    </button>
                </form>
            </div>
        </div>
        <c:forEach items="${pList}" var="list" varStatus="i">
            <div class="mf-menu"
                 style="height: auto; line-height:normal; padding: 30px 0">
                <div class="fl mf-prd">

                    <img src="/show/${list.productPic}"
                         width="100" align="center"/>
                    <span>${list.productName}</span>
                    <span>${list.productPrice}</span>
                    <span style="font-size: 12px;">${list.productDescribe}</span>
                    <span>${list.categoryName}</span>
                </div>

                <div class="fr weizhi">
                    <c:if test="${list.productStatus eq 'Y'}">
                        <button class="xiajia" onclick="update(${list.productId},'N')">
                            下架
                        </button>
                    </c:if>
                    <c:if test="${list.productStatus eq 'N'}">
                        <button class="shangjia" onclick="update(${list.productId},'Y')">
                            上架
                        </button>
                    </c:if>

                    <button class="xiugai" onclick="change('product${i.count}',1)">
                        修改
                    </button>
                    <button class="del" onclick="del(${list.productId},${nowPage})">
                        删除
                    </button>
                </div>

                <div id="update_product${i.count}" style="display: none;" class="change">
                    <div class="new-food clear">
                        <div>
                            <input type="hidden" value="${list.productPic}" id="productPic${list.productId}">
                            <input type="file" id="photoFile${list.productId}" style="display: none;"
                                   onchange="upload(${list.productId})">
                            <button class="xiugai nw-btn" style="padding: 10px" onclick="uploadPhoto(${list.productId})">
                                上传图片
                            </button>
                            <input type="hidden" value="${list.productName}" id="oldName" class="t-ad" style="width: 150px"/>
                            <input placeholder="餐品名" onblur="checkName(this)" value="${list.productName}" id="productName${list.productId}" type="text"/>
                            <span class="msg" style="color: red"></span>
                            <input placeholder="单价" value="${list.productPrice}" id="productPrice${list.productId}"  type="text"/>
                        </div>
                        <div>
                            <input placeholder="描述" value="productDescribe" id="productDescribe${list.productId}" type="text" style="width: 390px"/>
                            <select class="select"  name="categoryName" id="categoryId${list.productId}">
                                <c:forEach items="${tList}"  var="tList">
                                    <option value="${tList.categoryId}"
                                            id="${tList.categoryId}">${tList.categoryName}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <div>
                            <input type="submit" class="addsub" onclick="updateProduct(${list.productId})" class="nw-btn xiugai m-submit"
                                   style="border: none; height: 40px" />
                            <input type="reset" value="取消" onclick="change('product${i.count}',2)"
                                   class="del" style="height: 40px; border-radius: 5px"/>
                        </div>
                    </div>
                </div>
            </div>
        </c:forEach>

        <div class="mf-top clear">
            <div class="fl" style="line-height: 40px; margin-top:40px">
                <a href="#" class=" rb-red" onclick="change('addproduct',3)">+添加新餐品</a>
            </div>
            <div id="insert_addproduct" style="display: none;" class="change">
                <div class="new-food clear">
                    <div>
                        <input type="hidden" id="productPic0">
                        <input type="file" id="photoFile0" style="display: none;" onchange="upload(0)">
                        <button class="xiugai nw-btn" style="padding: 10px" onclick="uploadPhoto(0)">
                            上传图片
                        </button>
                        <input placeholder="餐品名" id="productName0" name="productName" value="" type="text"
                               onblur="checkPName(this)"/>
                        <span class="msg" style="color: red"></span>
                        <input placeholder="单价" id="productPrice0" type="text"/>
                    </div>
                    <div>
                        <input placeholder="描述" id="productDescribe0" type="text" style="width: 390px"/>
                        <%--                        <input type="text" placeholder="分类" style="margin-right: 0;" />--%>
                        <select class="select" id="categoryId0" name="categoryName">
                            <c:forEach items="${tList}" var="tList">
                                <option value="${tList.categoryId}"
                                        id="${tList.categoryId}">${tList.categoryName}</option>
                            </c:forEach>
                        </select>
                        </a>
                    </div>
                    <div>
                        <input type="submit" class="addsub" class="nw-btn xiugai m-submit"
                               style="border: none; height: 40px" onclick="save(0)"/>
                        <input type="reset" value="取消" onclick="change('addproduct',4)"
                               class="del" style="height: 40px; border-radius: 5px"/>
                    </div>
                </div>
            </div>
            <div>
                <ul class="pagination fr" style="margin-right: 50px; margin-top:40px">
                    <c:forEach begin="1" end="${totalPage}" var="i">
                        <%--   默认页--%>
                        <c:if test="${nowPage == i}">
                            <li><a class="active"
                                   href="ProductServlet/gotoProduct?nowPage=${i}&categoryName=${categoryName}&productName=${productName}">${i}</a>
                            </li>
                        </c:if>
                        <c:if test="${nowPage != i}">
                            <li>
                                <a href="ProductServlet/gotoProduct?nowPage=${i}&categoryName=${categoryName}&productName=${productName}">${i}</a>
                            </li>
                        </c:if>
                    </c:forEach>
                </ul>
            </div>
        </div>


    </div>
</div>
</body>
</html>
<SCRIPT Language=VBScript><!--

//-->

</SCRIPT>
